* {
  margin:0;
  padding:0;
}

*:focus {
  outline:none;
}

body {
  background-color:#2f2f2f;
  line-height:1.5em;
  font:small 'Ubuntu','Trebuchet MS',Verdana,Arial,Sans-serif;
  color:#fff;
}

a {
  color: white;
}

#page-wrap {
  width:96%;
  margin:90px auto 10px;
  overflow:hidden;
  clear:both;
}

#editor-fixed {
  width:100%;
  background-color:rgba(0,0,0,0.4);
  border-bottom:1px solid black;
  padding:10px 15px;
  height:45px;
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  left:0px;
  z-index:999;
}

h2{
  width:98%;
  margin:0 auto;
  font-weight:normal;
  color:#999;
}

h2 label {
  font-weight:normal;
  font-size:12px;
}

textarea {
  display:block;
  text-shadow:none;
  width:98%;
  height:396px;
  margin:10px auto;
  padding:5px;
  text-align:left;
  border:1px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:0px 1px 2px black;
  -moz-box-shadow:0px 1px 2px black;
  box-shadow:0px 1px 2px black;
  font:normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
}

textarea:focus {
  background-color:#002b36;
  border:1px solid #268bd2;
  color: rgb(38, 139, 210);
}

code {
  color: rgb(181, 137, 0);
}

.button-group {
  text-align:center;
  margin:0 0 10px;
}

.box {
  text-align:center;
  margin:auto;
  border:1px solid #555;
  background-color:#444;
  padding:10px;
  margin:10px;
}

.box p {
  text-align:left;
  margin:0 0 2px;
}

.box button {
  margin:30px auto 9px;
}

button {
  cursor:pointer;
  padding:2px 5px;
  color:#fff;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  border:1px solid #111;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;  
}

button:hover {
  text-decoration:none;
  background-color:#900;
}

button:active {
  background-color:#527915;
}

.button-group button {
  padding:7px 18px;
}

#btn {
  margin:0 0 10px 25px;
}

.col {
  width:45%;
  margin:0 auto 30px;
  border:1px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:0px 1px 2px black;
  -moz-box-shadow:0px 1px 2px black;
  box-shadow:0px 1px 2px black;
  padding:15px 15px 10px 15px;
}

.left {
  float:left;
  margin-left:1%;
}

.right {
  float:right;
  margin-right:1%;
}

.footer {
  display:block;
  height:20px;
  margin:0 4% 0 4%;
  text-align:right;
}

label {
  cursor:pointer;
  text-decoration:none;
}

label:hover {
  text-decoration:underline;
}

label+span,
input:disabled+label,
input:disabled+label:hover,
input:disabled+label * {
  color:#aaa !important;
  text-decoration:none;
  text-shadow:none;
  cursor:default;
}

input:checked+label+span {
  color:black;
}

.clear {
  display:block;
  clear:both;
}

pre {
  overflow:auto;
  white-space:pre;
  white-space:pre-wrap;
  word-wrap:break-word;
  text-shadow:none;
  background-color:#002b36;
  border-left:4px solid #268bd2;
  margin:0 2% 30px;
  cursor:text;
}

pre code {
  display:block;
  color: rgb(136, 136, 136);
  font:normal 12px Monaco,'Courier New',Monospace;
  padding:10px 15px;
}

pre .st {
  color:purple;
}

pre .pr {
  color: rgb(181, 137, 0);
}

pre .vl {
  color: rgb(42, 161, 152);
}

pre .pn {
  color: rgb(38, 139, 210);
}

pre .im {
  color:red;
}

pre .cm,
pre .cm span {
  color:#666 !important;
  font-style:italic;
  font-weight:normal;
}

.hidden {
  display:none;
}

@media(max-width:767px) {
  .col.left,
  .col.right {
    float:none;
    display:block;
    width:95%;
    margin:0 auto 20px;
  }
  .footer {
    margin:10px 4% 15px;
  }
}